<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @current-change="currentChange"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div v-if="scope.row.icon">
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </div>
      </template>
      <template
        slot-scope="{type,size,row}"
        slot="menu"
      >
        <el-button
          icon="el-icon-circle-plus"
          :size="size"
          :type="type"
          @click="toEdit(row)"
        >创建融资申请</el-button>
      </template>
    </avue-crud>

    <el-dialog
      title="融资申请"
      class="avue-dialog"
      top="5vh"
      :visible.sync="box"
      width="55%"
      @opened="open"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="130px"
        class="form"
      >
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left"><i class="el-icon-info"></i> 企业信息</el-divider>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名称">
              <el-input v-model="form.qymc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会信用代码">
              <el-input v-model="form.qyshxydm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册时间">
              <el-input v-model="form.createTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资金">
              <el-input v-model="form.zczb"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业">
              <el-input v-model="form.sshy"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业类型">
              <el-input v-model="form.qylx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业联系方式">
              <el-input v-model="form.qylxfs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册地址">
              <el-input v-model="form.zcdz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left"><i class="el-icon-info"></i> 法人信息</el-divider>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="form.frxm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input v-model="form.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-input v-model="form.birthday"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-input v-model="form.nativePlace"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚姻状况">
              <el-input v-model="form.maritalStatus"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历">
              <el-input v-model="form.education"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系地址">
              <el-input v-model="form.contactAdress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left"><i class="el-icon-info"></i> 需求信息</el-divider>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求金额">
              <el-input v-model="form.demandAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求金额大写">
              <el-input v-model="form.demandAmountCapitalized"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="担保方式">
              <el-input v-model="form.guarantyType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="融资期限(月)">
              <el-input v-model="form.rzqx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="融资用途">
              <el-input v-model="form.financingPurpose"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="还款来源">
              <el-input v-model="form.repaySource"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left"><i class="el-icon-info"></i> 经办人信息</el-divider>
          </el-col>
          <el-col :span="24">
            <el-table>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left"><i class="el-icon-info"></i>预留收款账户信息</el-divider>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款开户银行">
              <el-input v-model="form.receiveBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款开户行">
              <el-input v-model="form.receiveAccountBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人">
              <el-input v-model="form.receivePayee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账号">
              <el-input v-model="form.receiveAccount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          plain
          @click="resetForm('form')"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('zc')"
        >暂 存</el-button>
        <el-button
          type="primary"
          @click="submitForm('fb')"
        >发 布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addOrder, pubOrder, getCustomer, companyDet } from '@/api/manager.js'
export default {
  data() {
    return {
      /* 融资申请表单 */
      box: false,
      form: {},
      rules: {
        name: [
          {
            required: false,
            message: '请输入活动名称',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
        region: [
          {
            required: true,
            message: '请选择活动区域',
            trigger: 'change',
          },
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change',
          },
        ],
        resource: [
          {
            required: true,
            message: '请选择活动资源',
            trigger: 'change',
          },
        ],
        desc: [
          {
            required: true,
            message: '请填写活动形式',
            trigger: 'blur',
          },
        ],
      },

      /* 分页 */
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: true,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        searchSpan: 8,
        searchMenuSpan: 4,
        searchLabelWidth: '20%',
        column: [
          {
            label: '企业名称',
            prop: 'qymc',
            display: false,
            search: true,
          },
          {
            label: '社会统一信用代码',
            prop: 'qyshxydm',
            display: false,
            search: true,
          },
          {
            label: '企业类型',
            prop: 'qylx',
            type: 'select',
            search: true,
            dicData: [
              {
                label: '小微企业',
                value: '1',
              },
              {
                label: '中型企业',
                value: '2',
              },
              {
                label: '大型企业',
                value: '3',
              },
              {
                label: '超大型企业',
                value: '4',
              },
              {
                label: '个体工商户',
                value: '5',
              },
            ],
            display: false,
          },
          {
            label: '法人姓名',
            prop: 'frxm',
            display: false,
            search: true,
          },
        ],

        group: [
          {
            icon: 'el-icon-info',
            label: '企业信息',
            collapse: true,
            column: [
              {
                label: '企业名称',
                prop: 'qymc',
              },
              {
                label: '社会统一信用代码',
                prop: 'qyshxydm',
              },
              {
                label: '注册时间',
                prop: 'createTime',
              },
              {
                label: '注册资金',
                prop: 'zczb',
              },
              {
                label: '企业类型',
                prop: 'qylx',
                type: 'select',
                dicData: [
                  {
                    label: '小微企业',
                    value: '1',
                  },
                  {
                    label: '中型企业',
                    value: '2',
                  },
                  {
                    label: '大型企业',
                    value: '3',
                  },
                  {
                    label: '超大型企业',
                    value: '4',
                  },
                  {
                    label: '个体工商户',
                    value: '5',
                  },
                ],
              },
              {
                label: '所属行业',
                prop: 'sshy',
                type: 'select',
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '农林牧渔业',
                    value: '0',
                  },
                  {
                    label: '教育',
                    value: '1',
                  },
                  {
                    label: '采矿业',
                    value: '2',
                  },
                ],
              },
              {
                label: '注册地址',
                prop: 'zcdz',
              },
              {
                label: '企业性质',
                prop: 'qyxz',
              },
              {
                label: '企业联系方式',
                prop: 'qylxfs',
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '法人信息',
            collapse: true,
            column: [
              {
                label: '法人姓名',
                prop: 'frxm',
              },
              {
                label: '性别',
                prop: 'sex',
                type: 'select',
                dicData: [
                  {
                    label: '男',
                    value: '1',
                  },
                  {
                    label: '女',
                    value: '0',
                  },
                ],
              },
              {
                label: '出生日期',
                type: 'date',
                prop: 'birthday',
              },
              {
                label: '籍贯',
                prop: 'nativePlace',
              },
              {
                label: '婚姻状况',
                prop: 'maritalstatus',
                type: 'select',
                dicData: [
                  {
                    label: '已婚',
                    value: '1',
                  },
                  {
                    label: '未婚',
                    value: '0',
                  },
                ],
              },
              {
                label: '学历',
                prop: 'education',
                type: 'select',
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '专科',
                    value: '0',
                  },
                  {
                    label: '本科',
                    value: '1',
                  },
                  {
                    label: '其他',
                    value: '2',
                  },
                ],
              },

              {
                label: '身份证',
                prop: 'idCard',
              },
              {
                label: '手机号',
                prop: 'phone',
              },
              {
                label: '邮箱',
                prop: 'email',
              },
              {
                label: '联系地址',
                prop: 'contactAdress',
              },
            ],
          },
        ],
      },
    }
  },
  methods: {
    onLoad(page, params = {}) {
      params = {
        pageNum: page.currentPage,
        pageSize: page.pageSize,
      }
      this.loading = true
      getCustomer(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    toEdit(row) {
      /* 赋值customerCode */
      if (row.qyshxydm) {
        this.box = true
        this.form.customerCode = row.qyshxydm
      } else {
        this.$message.error('该企业无社会信用代码!')
      }
    },
    open() {
      /* 弹窗打开回显企业信息 */
      companyDet({
        companyCode: this.form.customerCode,
      }).then((data) => {
        if (data.status) {
          this.form = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    /* 提交 */
    submitForm(t) {
      if (t == 'zc') {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let f = this.form
            let form = {
              customerCode: f.qyshxydm,
              demandAmount: f.demandAmount,
              demandAmountCapitalized: f.demandAmountCapitalized,
              financingPurpose: f.financingPurpose,
              guarantyType: f.guarantyType,
              receiveAccount: f.receiveAccount,
              receiveAccountBank: f.receiveAccountBank,
              receiveBank: f.receiveBank,
              receivePayee: f.receivePayee,
              repaySource: f.repaySource,
            }
            addOrder(form).then((data) => {
              if (data.status) {
                this.box = false
                this.$message.success('暂存成功!')
              } else {
                this.$message.error(data.msg)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let f = this.form
            let form = {
              customerCode: f.qyshxydm,
              demandAmount: f.demandAmount,
              demandAmountCapitalized: f.demandAmountCapitalized,
              financingPurpose: f.financingPurpose,
              guarantyType: f.guarantyType,
              receiveAccount: f.receiveAccount,
              receiveAccountBank: f.receiveAccountBank,
              receiveBank: f.receiveBank,
              receivePayee: f.receivePayee,
              repaySource: f.repaySource,
            }
            pubOrder(form).then((data) => {
              if (data.status) {
                this.box = false
                this.$message.success('发布成功!')
              } else {
                this.$message.error(data.msg)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    /* 重置 */
    resetForm(formName) {
      this.box = false
      this.$refs[formName].resetFields()
    },
  },
}
</script>
